﻿@using Topro.Entity.Enum;
@{
    Layout = "~/Views/Shared/_Dialog.cshtml";
}
<script src="/lib/multiselect/jquery.multi-select.js"></script>
<link rel="stylesheet" type="text/css" href="/lib/multiselect/jquery.multi-select.css" />
@model Topro.Entity.Response.User.UserResponse
<section class="container-fluid" style="background-color: white;">
    <form class="form-horizontal m15_t" id="form">
        <div class="tab-content">
            <input type="hidden" name="Id" value="@(Model.Id)">

            <div class="tab-pane fade in active" id="home">
                <div class="form-group">
                    <label class="wd100 control-label">账号：</label>
                    <div class="wd250">
                        <input class="form-control" type="text" name="account" maxlength="40" />
                    </div>
                </div>

                <div class="form-group">
                    <label class="wd100 control-label">新密码：</label>
                    <div class="input-group wd250">
                        <input class="form-control" type="password" name="newPassWord" maxlength="20" placeholder="长度必须介于 6 和 20 之间" autocomplete="off" />
                        <span class="input-group-addon" style="margin-left:20px;" onclick="changeInputType(this);">
                            <i class="glyphicon glyphicon-eye-open"></i>
                        </span>
                    </div>
                </div>

                <div class="form-group" id="divAgainPwd">
                    <label class="wd100 control-label">确认密码：</label>
                    <div class="input-group wd250">
                        <input class="form-control" type="password" name="confirmNewPassWord" maxlength="20" placeholder="必须与新密码保持一致" autocomplete="off" />
                        <span class="input-group-addon" style="margin-left:20px;" onclick="changeInputType(this);">
                            <i class="glyphicon glyphicon-eye-open"></i>
                        </span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="wd100 control-label">公司角色：</label>
                    <div>
                        <div class="f_l">
                            <h5 class="wd150">未选择</h5>
                            <select id='noselected' multiple='multiple' name="noselected" size="10" class="wd150" style="height:170px;">
                                @{
                                    if (Model != null && Model.NoSelectedRole != null && Model.NoSelectedRole.Any())
                                    {
                                        foreach (var item in (List<Topro.Entity.Response.Role.RoleResponse>)Model.NoSelectedRole)
                                        {
                                            <option value="@(item.Id)">@(item.Name)</option>
                                        }
                                    }
                                }
                            </select>
                        </div>
                        <div class="f_l m30_l">
                            <h5 class="wd150">已选择</h5>
                            <select id='selected' multiple='multiple' name="selected" size="10" class="wd150" style="height:170px;"></select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</section>
@section footerScript{
    <script type="text/javascript">

        var noselected = $("select[name='noselected']");
        var selected = $("select[name='selected']");

        $(function () {

            //新增
            $("#noselected").dblclick(function () {

                var options = $(this).find("option:selected");

                var exist = false;

                $("#selected option").each(function () {
                    if (options.val() == $(this).val()) {
                        exist = true;
                    }
                });

                if (exist) {
                    Topro.UI.Tip_short_warning('"' + options.text() + '" 已存在');
                } else {
                    selected.append("<option value='" + options.val() + "'>" + options.text() + "</option >");
                }
            })
            //移除
            $("#selected").dblclick(function () {
                $(this).find("option:selected").remove();
            })

        });

        function changeInputType(obj) {

            var that = $(obj).prev();
            if (that.attr('type') == 'text') {
                that.attr('type', 'password');
                $(obj).find("i").removeClass("glyphicon-eye-open");
                $(obj).find("i").addClass("glyphicon-eye-close");
            } else {
                that.attr('type', 'text');
                $(obj).find("i").removeClass("glyphicon-eye-close");
                $(obj).find("i").addClass("glyphicon-eye-open");
            }

        }

        function save() {

            var user = $("#form").serializeJSON();

            var ids = new Array();

            $("#selected option").each(function () {
                ids.push($(this).val());
            });

            var cover = Topro.UI.Mask({
                obj: $("body"),
                opacity: 0.5
            });

            Topro.Util.Ajax({
                type: "POST",
                url: "/Auth/SaveUser",
                data: { request: user, ids: ids },
                success: function (res) {
                    if (res.success) {
                        cover.Remove();
                        Topro.UI.DialogOpener().Tip_success("操作成功！");
                        Topro.UI.DialogOpener().page.search();
                        Topro.UI.CloseDialog();
                    } else {
                        cover.Remove();
                        Topro.UI.Tip_short_warning("操作失败！" + res.message);
                    }
                },
                error: function (json) {
                    cover.Remove();
                    Topro.UI.Tip_warning("操作失败！请查看网络，请重试。");
                }
            });

        }
    </script>
}